<HTML>
	<HEAD>
		<TITLE>Tree view lines styling</TITLE>
	<STYLE>

    h1 { width:*; }
    body 
    {
      flow: "1  1  1  1"
            "2  4  6  8"
            "3  5 7 9"
            "10 10 10 10"
            "11 13 15 17"
            "12 14 16 18";
      border-spacing-x: 10px;
    }
    
    body widget { size:*; }
    widget option code { color:red; }
    
    widget option 
    {
      list-marker-color:green;
    }
    widget option:rtl 
    {
      list-marker-color:blue;
    }
    
    //widget option > :first-child:hover /* highlight option's caption on hover */
    //{
    //  outline:1px solid highlight -1px;
    //}          
    
    @media composition-supported /*Aero DWM */
    {
      option > text 
      { 
        color: windowtext;
        background-color:transparent; 
        background-repeat:expand;
      }
      option > text:hover { background-image:url(theme:list-view-item-hover); }
      option:current > text { background-image:url(theme:list-view-item-selected-not-focus); }      
      option:current > text:hover { background-image:url(theme:list-view-item-selected-hover); }

      widget:focus option:current > text { background-image:url(theme:list-view-item-selected); }
    }
    
    
	</STYLE>
	</HEAD>
	<BODY>
	<h1>Select: tree view with tree lines</h1>
  <caption>simple</caption>
  <widget #dd type="tree" >
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  <caption>with treelines</caption>
  <widget #dd type="tree"  treelines>
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  <caption>with checkmarks</caption>
  <widget #dd type="tree"  checkmarks>
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  <caption>with checkmarks and treelines</caption>
  <widget #dd type="tree"  checkmarks treelines >
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  
	<h1>RTL versions of the above</h1>
  <caption>simple</caption>
  <widget #dd type="tree" dir=rtl>
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  <caption>with treelines</caption>
  <widget #dd type="tree"  treelines dir=rtl>
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  <caption>with checkmarks</caption>
  <widget #dd type="tree"  checkmarks dir=rtl>
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 
  <caption>with checkmarks and treelines</caption>
  <widget #dd type="tree"  checkmarks treelines dir=rtl>
    <option expanded>Metals
      <option expanded>Alkaline Metals
        <option>Lithium <code>Li</code></option>
        <option>Sodium <code>Na</code></option>
        <option>Potassium <code>K</code></option>
      </option>
      <option expanded>Transition Metals
        <option>Scandium <code>Sc</code></option>
        <option>Titanium <code>Ti</code></option>
        <option>Vanadium <code>V</code></option>
      </option>
    </option>
    <option expanded>Halogens
        <option>Fluorine <code>F</code></option>
        <option>Chlorine <code>Cl</code></option>
        <option>Bromine <code>Br</code></option>
    </option>
  </widget> 


  
	</BODY>
 
</HTML>
